<template>
	<view>
		<view class="top">
			<image :src="require('@/static/images/play.png')" style="width: 60rpx;height: 60rpx;">
				<view class="all">
					<text>播放全部</text>
				</view>
				<view class="quan">
					(50)
				</view>
		</view>
		<view class="content">
			<view class="item" v-for="songle,index in datalist" :key="index" @click="changestate(index,songle)">
				<view class="rank">
					<text :class='itemIndex===index? "item-active-color":"item-color"'>{{index+1}}</text>
					<image src="@/static/images/top.png" mode="" style="width: 30rpx;height: 30rpx;"></image>
				</view>

				<view class="desc">
					<view class="songname">
						<text :class='itemIndex===index? "item-active-color":"item-color"'>{{songle.name}}</text>
					</view>
					<view class="songdesc">
						<text :class='itemIndex===index? "item-active-color":"item1-color"'>{{songle.ar[0].name}}</text>
						<text :class='itemIndex===index? "item-active-color":"item1-color"'>·</text>
						<text :class='itemIndex===index? "item-active-color":"item1-color"'>{{songle.name}}</text>
					</view>
				</view>

			</view>
			<view class="descriton">
				<text>鲸鱼音乐内每周各排行榜的前五十首歌,每周四更新</text>
			</view>
			<view class="but">
				<button type="default" @click="tapscroll" style="background-color: #02d15f;">回到顶部</button>
			</view>
		</view>
	</view>

	</view>
</template>

<script>
	export default {
		props: {
			datalist: Array,
		},
		data() {
			return {
			itemIndex:100
			}
		},
		methods: {
			tapscroll() {
				uni.pageScrollTo({
					scrollTop: 0,
					duration: 200
				})
			},
			changestate(index,songle){
				this.itemIndex = index
				uni.$emit('getsongitem',songle)
				uni.switchTab({
					url:'/pages/music/music' 
				})
				
			}
		}
	}
</script>

<style>
	.top {
		display: flex;
		margin-left: 30rpx;
	}

	.all {
		color: white;
		margin-left: 15rpx;
	}

	.quan {
		color: #bfbfbf;
		margin-left: 15rpx;
	}

	.rank {

		color: white;
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.songname {
		width: 500rpx;
		overflow: hidden;
		color: white;
		font-size: 35rpx;
		font-weight: 500;
		text-overflow: ellipsis;
		flex-wrap: nowrap;
	}

	.songdesc {
		color: #bfbfbf;
		font-size: 26rpx
	}

	.content {
		margin-left: 34rpx;
	}

	.item {
		display: flex;
		margin-top: 40rpx;
		align-items: center;
	}

	.desc {
		margin-left: 50rpx;
	}

	.descriton {
		font-size: 26rpx;
		color: #bfbfbf;
		margin-top: 60rpx;
		margin-left: 70rpx;
	}
	.item-color{
		color: white;
	}
	.item-active-color{
		color: #02d15f;
	}
	.item1-color{
		color: #bfbfbf;
	}
</style>
